<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>table squeezer</title>
<style type="text/css" media="screen" rel="Stylesheet"><!--
	.drag_handle{ background-color: #89756A; padding: 0px; margin: 2px; width:20px; height:16px; cursor: pointer; }
	.even{ background-color: #AAA; }
	.odd{ background-color: #EEE; }
--></style>
<script language="javascript" type="text/javascript" charset="UTF-8" src="../../lib/prototype.js" ></script>
<script language="javascript" type="text/javascript" charset="UTF-8" src="../../src/prototype_ext.js" ></script>
<script language="javascript" type="text/javascript" charset="UTF-8" src="../../src/tree_process.js" ></script>
</head>
<body>
テーブルの表示行を絞り込むテスト
行検索: <input type="text" id="row_search" size="20"/>
<table id="table0" class="dad_sortable" border="1" cellspacing="0" cellpadding="0" bordercolor="black">
	<thead>
		<tr>
			<td>ID</td>
			<td>名前</td>
			<td>URL</td>
		</tr>
	</thead>
	<tbody>
		<tr><td>1</td><td>The Serverside.com</td><td>http://www.theserverside.com/</td></tr>
		<tr><td>2</td><td>Eclipse.org</td><td>http://www.eclipse.org/</td></tr>
		<tr><td>3</td><td>MSDN</td><td>http://msdn.microsoft.com/</td></tr>
		<tr><td>4</td><td>IBM developerWorks</td><td>http://www-06.ibm.com/jp/developerworks/</td></tr>
		<tr><td>5</td><td>codehaus</td><td>http://codehaus.org/</td></tr>
	</tbody>
</table>
<script language="JavaScript" type="text/javascript"><!--
var command1 = new TreeProcess.Command.Invocator( 
    {"table": $("table0")},
    [
        {   "iterations": "table, tBodies, rows",
            "method": "showOrHide",
            "command": new TreeProcess.Command.ShowOrHide( {
                predicate: function(context) {
                    this.row_search = this.row_search || $("row_search");
                    var row = context.iterator;
                    var value = row.innerText || row.textContent || "";
                    return ((this.row_search.value == "" || value.toUpperCase().indexOf(this.row_search.value.toUpperCase()) > -1));
                }
            } )
        }
    ] 
);
var processor1 = new TreeProcess.Processor();
Event.observeDelay($("row_search"), "keyup", 
    function(event){ processor1.start(command1); }, 
    false, 
    { before_setTimeout: function(event) { processor1.stop(); } }
);
--></script>

<br/><br/><br/>

二つのテーブルをまとめて処理できる<br/>
名前: <input type="text" id="row_name_search" size="20"/>
URL: <input type="text" id="row_url_search" size="20"/><br/>
<div id="tables">
<table id="table1" class="dad_sortable" border="1" cellspacing="0" cellpadding="0" bordercolor="black">
	<thead>
		<tr>
			<td>ID</td>
			<td>No.</td>
			<td>名前</td>
			<td>URL</td>
		</tr>
	</thead>
	<tbody>
		<tr class="even"><td>1</td><td class="item_no">1</td><td class="name">prototype.js</td><td class="url">http://prototype.conio.net/</td></tr>
		<tr class="odd"><td>2</td><td class="item_no">2</td><td class="name">script.aculo.us</td><td class="url">http://script.aculo.us/</td></tr>
		<tr class="even"><td>3</td><td class="item_no">3</td><td class="name">Rico</td><td class="url">http://openrico.org/</td></tr>
		<tr class="odd"><td>4</td><td class="item_no">4</td><td class="name">Ruby</td><td class="url">http://www.ruby-lang.org/</td></tr>
		<tr class="even"><td>5</td><td class="item_no">5</td><td class="name">Ruby on Rails</td><td class="url">http://www.rubyonrails.org/</td></tr>
	</tbody>
</table>
----------------------  separation  ------------------------
<table id="table2" class="dad_sortable" border="1" cellspacing="0" cellpadding="0" bordercolor="black">
	<thead>
		<tr>
			<td>ID</td>
			<td>No.</td>
			<td>名前</td>
			<td>URL</td>
		</tr>
	</thead>
	<tbody>
		<tr class="odd"><td>6</td><td class="item_no">6</td><td class="name">java</td><td class="url">http://java.sun.com/</td></tr>
		<tr class="even"><td>7</td><td class="item_no">7</td><td class="name">apache httpd</td><td class="url">http://httpd.apache.org/</td></tr>
		<tr class="odd"><td>8</td><td class="item_no">8</td><td class="name">Tomcat</td><td class="url">http://tomcat.apache.org/</td></tr>
		<tr class="even"><td>9</td><td class="item_no">9</td><td class="name">JBoss</td><td class="url">http://labs.jboss.com/</td></tr>
		<tr class="odd"><td>10</td><td class="item_no">10</td><td class="name">Seasar</td><td class="url">http://www.seasar.org/</td></tr>
	</tbody>
</table>
</div>

<script language="JavaScript" type="text/javascript"><!--
var command2 = new TreeProcess.Command.Invocator( 
    {"tables": [$("table1"), $("table2")]},
    [
        {   "iterations": "tables,tBodies,rows",
            "method": "showOrHide",
            "command": new TreeProcess.Command.ShowOrHide( {
                predicate: function(context) {
                    this.field_name = this.field_name || $("row_name_search");
                    this.field_url = this.field_url || $("row_url_search");
                    var row = context.iterator;
                    var name_cell = document.getFirstElementByClassName("name", row);
                    var url_cell = document.getFirstElementByClassName("url", row);
                    var row_name = name_cell.innerText || name_cell.textContent || "";
                    var row_url = url_cell.innerText || url_cell.textContent || "";
                    return ((this.field_name.value == "" || row_name.indexOf(this.field_name.value) > -1) &&
                            (this.field_url.value == "" || row_url.indexOf(this.field_url.value) > -1));
                }
            } )
        }
    ] 
);
var processor2 = new TreeProcess.Processor();
Event.observeDelay($("row_name_search"), "keyup", 
    function(event){ processor2.start(command2); }, 
    false, 
    { before_setTimeout: function(event) { processor2.stop(); } }
);
Event.observeDelay($("row_url_search"), "keyup", 
    function(event){ processor2.start(command2); }, 
    false, 
    { before_setTimeout: function(event) { processor2.stop(); } }
);
--></script>

<div style="margin: 50px 0px  200px 0px;">
検索にひっかかったやつと同じNoを持つ行を表示する
<br/>
行検索: <input type="text" id="row_search_group_by_no" size="20"/>
<table id="table3" border="1" cellspacing="0" cellpadding="0">
	<thead>
		<tr>
			<td>ID</td>
			<td>No.</td>
			<td>名前</td>
			<td>URL</td>
		</tr>
	</thead>
	<tbody>
		<tr class="even"><td>1</td><td class="item_no">1</td><td>prototype.js</td><td>http://prototype.conio.net/</td></tr>
		<tr class="odd"><td>2</td><td class="item_no">1</td><td>prototype.js v1.4.0 の使い方</td><td>http://www.imgsrc.co.jp/~kuriyama/prototype/prototype.js.html</td></tr>
		<tr class="even"><td>3</td><td class="item_no">1</td><td>Prototype.js - Effectサンプル</td><td>http://hori-uchi.com/prototype/Effect.html</td></tr>
		<tr class="odd"><td>4</td><td class="item_no">2</td><td>script.aculo.us</td><td>http://script.aculo.us/</td></tr>
		<tr class="even"><td>5</td><td class="item_no">3</td><td>Rico</td><td>http://openrico.org/</td></tr>
		<tr class="odd"><td>6</td><td class="item_no">4</td><td>Ruby</td><td>http://www.ruby-lang.org/</td></tr>
		<tr class="even"><td>7</td><td class="item_no">4</td><td>Rubyとは - はてな</td><td>http://d.hatena.ne.jp/keyword/Ruby</td></tr>
		<tr class="odd"><td>8</td><td class="item_no">4</td><td>Rubyist Magazine - るびま</td><td>http://jp.rubyist.net/magazine/</td></tr>
		<tr class="even"><td>9</td><td class="item_no">5</td><td>Ruby on Rails</td><td>http://www.rubyonrails.org/</td></tr>
		<tr class="odd"><td>10</td><td class="item_no">5</td><td>Rails API ドキュメント</td><td>http://railsapi.masuidrive.jp/</td></tr>
	</tbody>
</table>
</div>
<div>%nbsp;</div>
<script language="JavaScript" type="text/javascript"><!--
var selectedNoSqueeze = new TreeProcess.Command.ShowOrHide( {
    getItemNo: function(row) {
        var td = document.getFirstElementByClassName("item_no", row);
        return (td) ? (td.innerText || td.textContent) : null;
    },
    selectNos: function(context) {
        this.matchingElement = this.matchingElement || $("row_search_group_by_no");
        var row = context.iterator;
        var value = context.iterator.innerText || context.iterator.textContent || "";
        if (value.indexOf(this.matchingElement.value) > -1) {
            if (!context["selectedNos"])
                context["selectedNos"] = [];
            context.selectedNos.push( this.getItemNo(row) );
        }
    },
    predicate: function(context) {
        if (!context["selectedNos"])
            return false;
        var row = context.iterator;
        return context["selectedNos"].contains( this.getItemNo(context.iterator) );
    }
} );
var command3 = new TreeProcess.Command.Invocator( 
    {"tables": [$("table3")]},
    [
        {   "iterations": "tables,tBodies,rows",
            "method": "selectNos",
            "command": selectedNoSqueeze
        },
        {   "method": "showOrHide", 
            "iterations": "tables, tBodies, rows",
            "command": selectedNoSqueeze
        }
    ] 
);
var processor3 = new TreeProcess.Processor();
Event.observeDelay($("row_search_group_by_no"), "keyup", 
    function(event){ processor3.start(command3); }, 
    false, 
    { before_setTimeout: function(event) { processor3.stop(); } }
);

--></script>

</body>
</html>
